<template>
  <div class="app-container">
    <el-row>
      <el-row>
        <el-col :span="24"  style="text-align: center">
          <div class="tag-group">
            病历号:<el-tag type="info">{{medicalRecordNo}}</el-tag>
            患者名称:<el-tag type="info">{{name}}</el-tag>
            看诊日期:<el-tag type="info">{{attendanceDate}}</el-tag>
          </div>
        </el-col>
      </el-row>
      <el-row >
       <div  class="app-container">
         <el-table border v-loading="loading"  :data="payList" @selection-change="handleCatalogSelectionChange">
           <el-table-column type="selection" width="55" align="center"/>
           <el-table-column label="id" align="center" v-if="show" prop="id"/>
           <el-table-column label="项目名称" align="center" prop="name"/>
           <el-table-column label="总金额(元)" align="center" prop="amount"/>
           <el-table-column label="开立时间" align="center" prop="createTime">
             <template slot-scope="scope">
               <span>{{parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
             </template>
           </el-table-column>
           <el-table-column label="项目类型" align="center" prop="type">
             <template slot-scope="scope">
               <el-tag>{{projectTypeLine[scope.row.type]}}</el-tag>
             </template>
           </el-table-column>
           <el-table-column label="状态" align="center" prop="status">
             <template slot-scope="scope">
               <el-tag>{{scope.row.status===1?'未缴费':'数据错误'}}</el-tag>
             </template>
           </el-table-column>
         </el-table>
            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.pageNum"
              :limit.sync="queryParams.pageSize"
              :page-sizes="[5,10,20]"
              :page-size="5"
              @pagination="getPayList"
            />
       </div>
      </el-row>
      <el-row>
       <div >
         <el-col :span="24" style="text-align: center">
             应收:
             <el-tag type="info">{{amount}}</el-tag>
             支付方式：
             <el-select v-model="catId" placeholder="请选择">
               <el-option
                 v-for="item in settlementCatOptions"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>
         </el-col>
       </div>
      </el-row>
      <el-row>
        <div class="app-container">
          <el-col :span="24" style="text-align: center">
            <el-button type="primary" @click="handlePayment">缴费</el-button>
            <el-button type="danger"  @click="returnRegistrationFee(false)">取消</el-button>
          </el-col>
        </div>
      </el-row>
    </el-row>
  </div>
</template>

<script>

  import {payList,handlePayment} from "@/api/dms/registration";

  // 结算类别
  import {listCat} from "@/api/bms/cat";

  export default {
    name: "Pay_list",
    props:['invoiceNo'],
    data() {
      return {
        // 遮罩层
        loading: true,
        /**  病历号*/
        medicalRecordNo: null,
        /** 患者名称*/
        name: null,
        /** 看诊日期*/
        attendanceDate: null,
        /** 发票号*/
        show:false,
        payList: [],
        // 总条数
        total: 0,
        // 总金额
        amount:0,
        //查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 5,
          registerId:null,
        },
        // 状态的对应的值
        projectTypeLine: {"1": "检查", "2": "检验", "3": "处置", "4": "成药处方","5": "草药处方"},
        // 结算类别id
        catId:null,
        // 结算类别列表
        settlementCatOptions: [],
        //收费参数
        payParams:{
          payList:[],
          amount:null,
          catId:null,
          registerId:null,
          invoiceNo:null
        }
      };
    },
    created() {
      // 结算类别
      this.getCatList();
    },
    watch: {
    },
    methods: {
      // 缴费列表
      getPayList(val) {
        if(val!==null && val!==undefined){
          this.loading = true;
          this.medicalRecordNo = val.pmsPatient.medicalRecordNo;
          this.name = val.pmsPatient.name;
          this.attendanceDate = val.attendanceDate;
          this.queryParams.registerId=val.id;
        }
        payList(this.queryParams).then(response => {
          this.payList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 结算类别列表获取 */
      getCatList() {
        listCat().then(response => {
          this.settlementCatOptions = response.rows;
        });
      },
      // 行选中事件
      handleCatalogSelectionChange(selection){
        this.payParams.payList=selection.map(item => item);
        let amounts= selection.map(item => item.amount);
        if(amounts.length===0){
          this.amount=0;
          return;
        };
        let amount = amounts.reduce((a,b)=>{
          return a+b;
        });
        this.amount = amount;
        this.payParams.amount = amount;
      },
      // 缴费
      handlePayment(){
        this.payParams.catId = this.catId;
        this.payParams.registerId = this.queryParams.registerId;
        this.payParams.invoiceNo = this.invoiceNo;
        if (!this.formVerified()) return;
        handlePayment(this.payParams).then(response => {
          if (response.code === 200) {
            this.msgSuccess("缴费成功");
            this.getPayList(null);
          }
          this.returnRegistrationFee(true);
        });
      },
      // 返回挂号列表页面
      returnRegistrationFee(flag){
        this.$emit('handleBack',flag,'registerList');
      },
      // 表单验证
      formVerified(){
        if(this.payParams.payList.length<=0){
          this.$emit('notify','请选择要缴费的项目')
        }
        if(!this.payParams.catId){
          this.$emit('notify','请选择支付方式')
        }
        if(!this.payParams.invoiceNo){
          this.$emit('notify','发票号不能为空')
        }
        return !(this.payParams.payList.length <= 0 || !this.payParams.catId || !this.payParams.invoiceNo);
      }
    }
  };
</script>
<style scoped>


</style>
